<template >
  <div class="main-div">
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-form-item label="账号">
        <el-input v-model="search.userName" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getStaffList">查询</el-button>
      </el-form-item>
    </el-form>

    <div class="add-div">
      <el-button type="primary" plain @click="add">新增</el-button>
    </div>

    <el-table  :data="staffList" style="width: 100%">
      <el-table-column prop="userName" label="账号" width="180" />
      <el-table-column prop="password" label="密码" width="180" />
      <el-table-column prop="phone" label="手机号" width="180" />
      <el-table-column prop="genderStr" label="性别" width="180" />
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="{row}">
          <el-button link type="primary" size="small" @click="edit(row)">修改</el-button>
          <el-button link type="primary" size="small" @click="deleteStaff(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="showPagination">
      <!-- <el-pagination background :page-size="10" layout="prev, pager, next" :total="totalPage" /> -->
      <el-pagination :page-size="10" :pager-count="totalPage" layout="prev, pager, next" :total="totalCount" />
    </div>

    <el-dialog width="30%" :modal="staffInfo" v-model="dialogVisible">
      <el-form ref="formRef" label-width="100px">
        <el-form-item label="账户名">
          <el-input v-model="staffInfo.userName" placeholder="请输入用户账户" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="staffInfo.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="staffInfo.phone" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="请选择角色">
          <el-select
           v-model="staffInfo.roleId"
           placeholder="请选择角色"
           style="width: 180px"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
          />
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="staffInfo.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button type="primary" @click="hide">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script setup>
import { GetStaffList,DeleteStaff } from '@/api/staff.js'
import { RoleList } from '@/api/admin.js'
import { ref } from 'vue'
import { Registry , Edit } from '@/api/staff.js'
import { useRouter } from 'vue-router'
import { ElMessage,ElMessageBox } from 'element-plus'
const router = useRouter();

var dialogVisible = ref(false);

// false表示新增，true表示修改
var editOrAdd = ref(false);

var search = ref([]);

var staffList = ref([]); 

const totalCount = ref(0)
const totalPage = ref(0)
const options = ref([])

var showPagination = ref(false);

getStaffList();

function getStaffList(data = {}) {

  GetStaffList(data)
    .then(res => {
      console.info(res.data);
      if(res.data.code !=200000){
        ElMessage({
          message: res.data.msg,
          type: 'warning'
        });
      }else{
        staffList.value = res.data.data.data;
        if (res.data.data.totalCount > 0) {
          showPagination = true;
          totalPage.value=res.data.data.totalPage;
          totalCount.value=res.data.data.totalCount;
        }
      }
    })
}
function getRoleList(data = {}) {
  
  RoleList(data)
    .then(res => {
      options.value = res.data.data.data;
    })
}

var staffInfo = ref({
  id:0,
  userName: '',
  password: '',
  phone: '',
  role: '',
  roleId: '',
  gender: 0
})

const onSubmit = () => {
  if(editOrAdd.value){
    Edit(staffInfo.value)
    .then(res => {
      if (res.data.code == 200000) { 
        dialogVisible.value=false;
        getStaffList();
      } else {
        //错误提示框
        ElMessage({
          message: res.data.msg,
          type: 'warning'
        });
      }
    })
  }else{
    Registry(staffInfo.value)
    .then(res => {
      if (res.data.code == 200000) { 
        hide();
        getStaffList();
      } else {
        //错误提示框
        ElMessage({
          message: res.data.msg,
          type: 'warning'
        });
      }
    })
  }

  
}

function edit(data){
  
  editOrAdd.value=true;
  getRoleList();
  staffInfo.value={...data};
  console.info(data);
  staffInfo.gender=data.gender;
  dialogVisible.value=true;
}

function deleteStaff(data){
  ElMessageBox.confirm(
    '是否确认删除',
    '提醒',{
      confirmButtonText:'确认',
      cancelButtonText:'取消',
      type:'warning'
    }
  ).then(()=>{
      DeleteStaff(data.id)
    .then(res => {
      if (res.data.code == 200000) { 
        // hide();
        ElMessage({
          type:'success',
          message:'删除成功'
        });
        getStaffList();
      } else {
        //错误提示框
        ElMessage({
          message: res.data.msg,
          type: 'warning'
        });
      }
    })
  }).catch(()=>{
    ElMessage({
      type:'info',
      message:'删除取消'
    })
  })
}

/**
 * dialog 操作，在dialog上有个v-model="dialogVisible"
 * 当地dialogVisible=true时，表示dialog打开，false表示关闭
 */
 function add(){
  dialogVisible.value=true;
  editOrAdd.value=false;
  getRoleList();
}
function hide(){
  dialogVisible.value=false;
}
</script>
<style>
body {
  background-color: aliceblue;
}

.main-div {
  border: 1px solid #cccccc;
  border-radius: 5px;
  background-color: white;
}

.el-form {
  margin-top: 8px;
  padding-left: 18px;
  background-color: white;
}

.add-div {
  padding-left: 18px;
}

.el-table {
  margin-top: 5px;
  padding-left: 10px;
  /* border-radius: 5% 5% 5% 5%;  */
  /* transform: skew(10deg); */
}

.el-table__column-resize-proxy {
  display: block;
}
</style>
